<template>
  <div>
    <Title :title="'感知对象'"/>
    <div class="box">
      <div class="itemBg" v-for="item in dataList" :key="item.typeName">
        <div class="itemBgFlex">
          <div class="itemBgLeft">
            <!-- <div>{{ item.icon }}</div> -->
            <img v-if="item.typeName === '小车'" :src="'[publicPath]static/images/compontone/icon_xiaoche.png'" alt="">
            <img v-if="item.typeName === '中车'" :src="'[publicPath]static/images/compontone/icon_zhongche.png'" alt="">
            <img v-if="item.typeName === '大车'" :src="'[publicPath]static/images/compontone/icon_dache.png'" alt="">
            <img v-if="item.typeName === '行人'" :src="'[publicPath]static/images/compontone/icon_xingren.png'" alt="">
            <img v-if="item.typeName === '非机动车'" :src="'[publicPath]static/images/compontone/icon_feijidongche.png'" alt="">
            <img v-if="item.typeName === '公交车'" :src="'[publicPath]static/images/compontone/icon_gongjiaoche.png'" alt="">
            <div>{{ item.typeName }}</div>
          </div>
          <div class="itemBgRight">
            <div>{{ item.num }}</div>
            <div>{{ item.unit }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, watch } from 'vue';
import Title from './title.vue'
import { useUserStore } from '@/store/user'
// import { xiaoche } from '@/assets/images/imagesIn'
import { getTarget } from '../../../utils/apiComponent'
// import icon_dache from '[publicPath]static/images/compontone/icon_dache.png'
// import icon_feijidongche from '[publicPath]static/images/compontone/icon_feijidongche.png'
// import icon_gongjiaoche from '[publicPath]static/images/compontone/icon_gongjiaoche.png'
// import icon_xiaoche from '[publicPath]static/images/compontone/icon_xiaoche .png'
// import icon_xingren from '[publicPath]static/images/compontone/icon_xingren.png'
// import icon_zhongche from '[publicPath]static/images/compontone/icon_zhongche .png'
export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title
  },
  setup() {
    const data = reactive({
      dataList:[{
        // icon: xiaoche,
        typeName: '小车',
        num: 14,
        unit: '辆',
        url: '[publicPath]static/images/compontone/icon_xiaoche.png'
      }, {
        // icon: xiaoche,
        typeName: '中车',
        num: 14,
        unit: '辆',
        url: '[publicPath]static/images/compontone/icon_zhongche.png'
      }, {
        // icon: xiaoche,
        typeName: '大车',
        num: 14,
        unit: '辆',
        url: '[publicPath]static/images/compontone/icon_dache.png'
      }, {
        // icon: xiaoche,
        typeName: '行人',
        num: 14,
        unit: '辆',
        url: '[publicPath]static/images/compontone/icon_xingren.png'
      }, {
        // icon: xiaoche,
        typeName: '非机动车',
        num: 14,
        unit: '辆',
        url: '[publicPath]static/images/compontone/icon_feijidongche.png'
      }, {
        // icon: xiaoche,
        typeName: '公交车',
        num: 14,
        unit: '辆',
        url: '[publicPath]static/images/compontone/icon_gongjiaoche.png'
      }]
    })
    
    const userStore = useUserStore()
    const perceptionArrComputed = computed(() => {
      return userStore.getPerceptionObject
    })
    watch(perceptionArrComputed, (newVal) => {
      // console.log(newVal)
      if (newVal.CAR) {
        data.dataList[0].num = newVal.CAR
      } else {
        data.dataList[0].num = 0
      }
      if (newVal.TRUNK_LIGHT) {
        data.dataList[1].num = newVal.TRUNK_LIGHT
      } else {
        data.dataList[1].num = 0
      }
      if (newVal.TRUNK_BIG) {
        data.dataList[2].num = newVal.TRUNK_BIG
      } else {
        data.dataList[2].num = 0
      }
      if (newVal.PEDESTRIAN) {
        data.dataList[3].num = newVal.PEDESTRIAN
      } else {
        data.dataList[3].num = 0
      }
      if (newVal.NON_MOTOR) {
        data.dataList[4].num = newVal.NON_MOTOR
      } else {
        data.dataList[4].num = 0
      }
      if (newVal.BUS) {
        data.dataList[5].num = newVal.BUS
      } else {
        data.dataList[5].num = 0
      }
    })
    // const initData = () => {
    //   getTarget().then((res) => {
    //     res.forEach(element => {
    //       if (element.typeId === '105') { 
    //         data.dataList[4].typeName = element.typeName
    //         data.dataList[4].num = element.num
    //       }
    //       if (element.typeId === '104') {
    //         data.dataList[3].typeName = element.typeName
    //         data.dataList[3].num = element.num
    //       }
    //       if (element.typeId === '106') {
    //         data.dataList[5].typeName = element.typeName
    //         data.dataList[5].num = element.num
    //       }
    //       if (element.typeId === '103') {
    //         data.dataList[2].typeName = element.typeName
    //         data.dataList[2].num = element.num
    //       }
    //       if (element.typeId === '101') {
    //         data.dataList[0].typeName = element.typeName
    //         data.dataList[0].num = element.num
    //         data.dataList[0].url = '[publicPath]static/images/compontone/icon_xiaoche.png'
    //       }
    //       if (element.typeId === '102') {
    //         data.dataList[1].typeName = element.typeName
    //         data.dataList[1].num = element.num
    //       }
    //     });
    //     data.dataList = res
    //   })
    // }
    onMounted(() => {
      // initData()
    })
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
})
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  margin-bottom: 10px;
}
.itemBgFlex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;;
}
.itemBg{
  width: calc(33% - 8px);
  height: 56px;
  padding: 0 7px;
  margin-right: 14px;;
  font-size: 16px;;
  background-image: url('@{publicPath}static/images/bg_ganzhiduixiagn.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  background: rgba(48,81,120,0.4);
  border: 1px solid rgba(90,176,237,0.4);
  margin-bottom: 24px;

  // align-items: center;
  // justify-content: space-between;
}
.itemBg:nth-child(3), .itemBg:nth-child(6){
  margin-right: 0;
}
.itemBgRight{
  display: flex;
  // height: 18px;
  justify-content: flex-end;
  align-items: center;
  color: rgba(203,233,255,0.5);
}
.itemBgRight div:nth-child(1){
  font-size: 18px;
  margin-right: 2px;
}
.itemBgRight div:nth-child(2){
  font-size: 14px;
}
.itemBgLeft{
  display: flex;
  // height: 18px;
  justify-content: flex-start;
  align-items: center;

}
img{
  width: 28px;
  height: 28px;;
}
</style>